import React, {useState} from "react";
import {Avatar, Button, Card, Flex} from "antd";
import './index.scss'
import {useSelector} from "react-redux";
import {StateType} from "@/store";
import {IconEnum} from "@/utils/IconEnum.ts";
import IconFont from "@/components/IconFont";
import UserInfoCard from "@/views/UserDetail/UserInfoCard.tsx";
import {EditOutlined} from "@ant-design/icons";
import EditableTag from "@/components/EditableTag";
import MyProgress from "@/views/UserDetail/MyProgress.tsx";
import MyTimeline from "@/views/UserDetail/MyTimeline.tsx";

const UserDetail: React.FC = () => {

  const user = useSelector((state: StateType) => state.pr.userInfo.user)

  const [tags, setTags] = useState(['幸福', '阳光', '热爱学习']);

  const updateTags = (newTags: string[]) => {
    setTags(newTags)
  }

  return (
    <Flex className="user-detail-box">
      <Card className="user-detail-box-left">
        <Flex vertical align="center">
          <Avatar src={user.avatar} size={72}/>
          <Flex align="center" justify="start">
            <h1 style={{fontWeight: 800, margin: '10px 0', letterSpacing: '2px', fontSize: '16px'}}>{user.nickName}</h1>
            <Button type="text" icon={<EditOutlined/>} size="small" style={{marginLeft: '4px'}}/>
          </Flex>
          <span className="user-detail-box-left-signature">
            <IconFont icon={IconEnum.AGE} style={{color: '#8BC34A'}}/>&nbsp;&nbsp;
            {user.signature}
          </span>

          <UserInfoCard user={user}/>


          <div className="user-detail-box-left-tag">
            <h1 style={{marginBottom: '10px'}}>标签:</h1>
            <EditableTag tags={tags} onUpdateTags={updateTags}/>
          </div>
        </Flex>
      </Card>

      <Card className="user-detail-box-right" style={{padding: 15}}>
        <h1 style={{fontWeight: 800}}>我的余生:</h1>
        <Flex>
          <MyProgress title="人生进度" percent={28}/>
          <MyProgress title="学习生涯" percent={95}/>
          <MyProgress title="开心程度" percent={45}/>
        </Flex>
        <h1 style={{fontWeight: 800, marginBottom: 20}}>我的计划:</h1>
        <MyTimeline/>
      </Card>
    </Flex>
  )
}

export default UserDetail